<script setup>
import { computed, ref, watch, watchEffect } from "vue";
// import { nodeConfig } from "./NodeTypes";
import nodeGroup from "./nodes/index";

const props = defineProps({
  visible: { type: Boolean, required: true },
  position: {
    type: Object,
    required: true,
    validator: (value) =>
      value && typeof value.x === "number" && typeof value.y === "number",
  },
});

const emit = defineEmits(["select", "close"]);

// 根据按钮位置，动态偏移计算面板位置
const menuStyle = computed(() => {
  const { x, y } = props.position;
  const offsetX = 50;
  const offsetY = -150;
  let left = x + offsetX;
  let top = y + offsetY;

  // 如果当前位置 + 盒子宽度 超出窗口，需要调整位置
  const windowWidth = window.innerWidth;
  const windowHeight = window.innerHeight;
  const boxWidth = 200;
  const boxHeight = 200;
  if (left + boxWidth > windowWidth) {
    left = windowWidth - boxWidth;
  }
  if (top + boxHeight > windowHeight) {
    top = windowHeight - boxHeight;
  }

  return {
    left: `${left}px`,
    top: `${top}px`,
  };
});

const treeData = ref(nodeGroup);

const boxVisibility = ref(false);

watchEffect(() => {
  boxVisibility.value = props.visible;
});

// 处理节点被点击
const handleNodeClick = (data) => {
  if (data.isNode) {
    emit("select", data);
    emit("close");
  }
};
</script>

<template>
  <tiny-dialog-box
    v-model:visible="boxVisibility"
    width="fit-content"
    :show-header="false"
    :show-footer="false"
    :show-close="false"
    :resize="false"
    :lock-scroll="true"
    :draggable="true"
    :custom-style="menuStyle"
    @close="emit('close')"
  >
    <tiny-tree-menu :data="treeData" accordion @node-click="handleNodeClick">
      <template #default="slotScope">
        <div class="node-item" v-if="slotScope.data.isNode">
          <span :target="slotScope.data.target" :class="slotScope.data.class">
            {{ slotScope.data.label }}
          </span>
          <component
            v-if="slotScope.data.icon"
            :is="slotScope.data.icon"
            class="custom-icon"
          ></component>
        </div>
      </template>
    </tiny-tree-menu>
    <!-- <button
        v-for="node in nodeConfig"
        :key="node.type"
        class="node-type-item"
        :style="{ borderColor: node.color }"
        @click="handleNodeSelect(node.type)"
      >
        {{ node.label }}
      </button> -->
  </tiny-dialog-box>
</template>

<style scoped>
.node-types-menu {
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  padding: 4px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 1000;
}

.node-type-item {
  white-space: nowrap;
  padding: 4px 8px;
  border: 1px solid;
  background: white;
  cursor: pointer;
  border-radius: 4px;
  text-align: left;
  font-size: 12px;
}

.node-type-item:hover {
  background: #f5f5f5;
}
.node-item {
  position: relative;
}
.node-item::before {
  display: inline-block;
  content: " ";
  position: relative;
  width: 5px;
  height: 12px;
  border-radius: 15px;
  background: red;
  /* padding-right: 5px; */
  margin-right: 5px;
}
</style>
